<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showContainer {
            width: 520px;
            height: 280px;
            border: 1px solid;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .imgShow {
            width: 2600px;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .imgShow img {
            float: left;

        }

        .nextorpre {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 40%;
            font-size: 40px;
            color: red;
            z-index: 10;
        }

        .next {
            float: right;
        }

        .dot {
            width: 100%;
            height: 50px;
            position: absolute;
            z-index: 10;
            bottom: 10px;
            display: flex;
            justify-content: center;
        }

        .dot span {
            width: 30px;
            height: 30px;
            display: block;
            background: red;
            border-radius: 50%;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="showContainer">
        <div class="nextorpre">
            <span class="pre">
                < </span>
                    <span class="next">></span>
        </div>
        <div class="dot">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="imgShow">
            <!-- div存放 所有的图片 -->
            <img src="./imgs/1t.png" alt="">
            <img src="./imgs/2t.png" alt="">
            <img src="./imgs/3t.png" alt="">
            <img src="./imgs/4t.png" alt="">
            <img src="./imgs/5t.png" alt="">
        </div>

    </div>

    <script>
        /* 
         如果把页面切换到其他页面 ，轮播图里的定时器依然在运行 ，导致定位的问题
            // 获取页面页面的事件  
        */
        var imgShowEle = document.querySelector(".imgShow");
        var showContainerEle = document.querySelector(".showContainer");

        // 获取下一页的按钮
        var nextEle = document.querySelector(".next");
        // 获取上一页的按钮
        var preEle = document.querySelector(".pre")

        var index = 0;  // 代表 图片所在的下标
        var timer;  // 声明一个全局的timer



        // 通过js 复制第一张图 ，然后放在最后一张图后面
        function copyFirstImg() {
            // 获取第一张图 ；
            var firstImg = imgShowEle.firstElementChild;
            // 复制第一张图 ；
            var copyFirstImg = firstImg.cloneNode(true);
            // 修改容器的宽度
            imgShowEle.style.width = "3120px";
            imgShowEle.appendChild(copyFirstImg);

        }

        // 复制第五张图 到前面

        function copyLastImg() {
            // 获取 第五张图 ，也是 倒数第二图。
            var fiveImg = imgShowEle.lastElementChild.previousElementSibling;
            console.log(fiveImg);
            // 复制第五张图
            var copyFiveImg = fiveImg.cloneNode(true);

            // 获取第一张图
            var firstImg = imgShowEle.firstElementChild;

            // 设置容器的宽度
            imgShowEle.style.width = "3640px";

            // 修改初始的left的定位值 
            imgShowEle.style.left = "-520px";

            // 添加到第一张图前面
            imgShowEle.insertBefore(copyFiveImg, firstImg);


        }




        // 根据 index的值 改变 小点的位置

        changeDot();
        function changeDot() {
            var dots = document.querySelectorAll(".dot span");
            // console.log(dots);
            dots.forEach(function (item, key) {
                // if(key==index){
                //     item.style.background = "white";
                // }else{
                //     item.style.background = "red";
                // }

                // 干掉所有 
                item.style.background = "red";
            })
            // 设置当前的样式
            dots[index].style.background = "white";
        }


        // 点击圆点的时候切换图像 
        function addDotEvent() {
            var dots = document.querySelectorAll(".dot span");
            dots.forEach(function (item, key) {
                item.onclick = function () {
                    console.log(key);

                    // 1.切换图像到 对应的位置 
                    // 2.改变全局的index值 ；
                    index = key;
                    move(imgShowEle, -(key + 1) * 520, "left", function () {
                        console.log("运动完成");
                        changeDot();
                    })

                }
            })
        }



        // 复制第一张图添加到最后一张图后
        copyFirstImg();

        // 复制第五张图 到 第一张图前面
        copyLastImg();

        autoPlay();

        addDotEvent()

        // visibilitychange : 页面切换的时候触发 ，切进入 ，切出去都会触发 ；
        // 页面 切走 ，停止停止器  ，切换进来的时候  开启定时器 。
        var judge = true; // 切换走的时候
        window.addEventListener("visibilitychange", function () {
            // console.log("切换页面了",judge);
            if (judge) {
                document.title = "页面离开了"
                clearInterval(timer);
            } else {
                document.title = "页面回来了";
                autoPlay();
            }
            judge = !judge;
        })


        // 下一页按钮绑定点击事件
        var timer2;
        nextEle.onclick = function () {
            console.log("点击了下一页");
            clearTimeout(timer2);
            if (!timer2) {
                move(imgShowEle, -(index + 1) * 520 - 520, "left", function () {
                    console.log("运动完成");
                    index++;
                    // console.log(index);
                    if (index == 5) {
                        index = 0;
                        imgShowEle.style.left = "-520px";
                    }
                    changeDot();
                })
            }
            timer2 = setTimeout(function(){
                timer2 = null;
            }, 2000);
            
            


        }

        /* 
        0  ---->  0
        1 ----> -520
        2 ---- >-1040
        3 ---->  -i*520
        
        
        4*520  
        */


        // 上一页功能
        preEle.onclick = function () {
            move(imgShowEle, -index * 520, "left", function () {
                index--;
                console.log(index);
                if (index == -1) {
                    // 修改index的值 为第五张图
                    index = 4;
                    // 把位置设置成 第五张图的位置 
                    imgShowEle.style.left = "-2600px";
                }

                changeDot()
            })
        }


        function autoPlay() {
            timer = setInterval(function () {
                move(imgShowEle, -(index + 1) * 520 - 520, "left", function () {
                    console.log("运动完成");
                    index++;
                    // console.log(index);
                    if (index == 5) {
                        index = 0;
                        imgShowEle.style.left = "-520px";
                    }
                    changeDot();
                })
            }, 2000)

            // 鼠标移入轮播图里的时候 停止 轮播 ，鼠标移除的时候 开启轮播 
            showContainerEle.onmouseenter = function () {
                console.log("鼠标移入了");
                // 停止轮播图
                clearInterval(timer);
            }

            // 鼠标离开轮播图的时候 轮播图需要继续自动播放

            showContainerEle.onmouseleave = function () {
                console.log("鼠标离开了");
                autoPlay();
            }
        }




        function move(ele, target, dir, cb) {
            var timer = setInterval(function () {
                var num = parseInt(getComputedStyle(ele, null)[dir]);
                // console.log(num);
                if (num == target) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    num += 10 * (target > num ? 1 : -1);
                    ele.style[dir] = num + "px";
                }
            }, 1)
        }

        // 作业 ： 1.复习 ，自己写一遍  2.自己写一下不一样的轮播图 3.项目功能
    </script>

</body>

</html>